<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a_vuejs/vue.global.js"></script>

</head>
<body style="margin: 0px;padding: 0px;">

<div id="app">
    <!-- 这里最好还是写完整 不要缩写 -->
    <my-top username="王五"></my-top>
    <my-left ></my-left>
    <my-right></my-right>
</div>

</body>

<script>

    const myTop = {
        props:['username'],
        template:'<div style="background-color: #f1bb89;height: 100px;">这里是顶部,登录用户:{{username}}</div>'
    }

    const myLeft = {
        template:'<div style="background-color: crimson;width: 200px;height: calc(100VH - 100px);float: left">这里是左侧</div>'
    }

    const myRight = {
        template:'<div style="background-color: darkblue;width: calc(100% - 200px);height: calc(100VH - 100px);float: left">这里是主体部分</div>'
    }

    const app = Vue.createApp({
        components:{//这里是一起批量定义的
            'my-top':myTop,
            'my-left':myLeft,
            'my-right':myRight,
        },
        data() {
            return {}
        },
        methods: {}
    })

    //组件:公共页面 top、head、left菜单、main、bottom

    //用到脚手架的时候 就可以把template中的内容放到一个单独的文件中

    //全局组件是一个一个定义的

    app.mount("#app")

</script>

</html>